<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <style>
        *{ font-size: 12px; padding: 0; margin: 0 auto;}
        body{ background: #f5f5f5;}
        .notice{ width: 290px; background: #ffffff; height: 90px;}
        .tab-title,.content{list-style-type: none; line-height: 22px;}
        .tab-title{ padding: 5px 10px;}
        .tab-title  li.tab{ width: 49px; display: inline-block; color:#666; text-align: center;}
        .tab-title  li a:hover,.tab-title  li.selected a{ border-bottom: 2px solid #f60; width: 40px; display: block; font-weight: bold;}

        .content{ margin-left: 15px; color:#666; line-height: 26px;}
        .content ul { list-style-type: none;}
        .content ul li{ display: inline-block; padding-right: 10px;}
        .content ul li a:hover{ color:#f80;}
        .hide{ display: none;}

    </style>
</head>
<body>
<div class="notice">
    <ul class="tab-title">
        <li class="tab selected"><a>公告</a></li>
        <li class="tab"><a>规则</a></li>
        <li class="tab"><a>论坛</a></li>
        <li class="tab"><a>安全</a></li>
        <li class="tab"><a>公益</a></li>
    </ul>
<div class="content-title">
    <div class="content">
      <ul>
        <li><a>新零售引燃商业未来 单日千亿交易催生新经济</a></li>
        <li><a>2016双11是新零售起点</a></li>
      </ul>
    </div>
    <div class="content hide">
        <ul>
            <li><a>不正当谋利规则变更</a></li>
            <li><a>淘宝亲宝贝市场管理规范</a></li>
            <li><a>淘宝价格发布规范变更</a></li>
            <li><a>店铺相关规则调整变更</a></li>
        </ul>
    </div>
    <div class="content hide">
        <ul>
            <li><a>新零售引燃商业未来 单日千亿交易催生新经济</a></li>
            <li><a>2016双11是新零售起点</a></li>
        </ul>
    </div>
    <div class="content hide">
        <ul>
            <li><a>恶意买家疯狂下单？</a></li>
            <li><a> 钱盾电脑版来啦！</a></li>
            <li><a>半路货被劫了！</a></li>
            <li><a> 许多卖家收到了这条</a></li>
        </ul>
    </div>
    <div class="content hide">
        <ul>
            <li><a>闲鱼公益上线招募NGO</a></li>
            <li><a>阿里与残联出助残政策</a></li>
            <li><a>公益宝贝卖家发票索取</a></li>
            <li><a>公益机构淘宝开店攻略</a></li>
        </ul>
    </div>
</div>
</div>
<script>
    $(".tab-title").on("mouseover","li",function(){
        var _self= $(this);
        window._self =_self;
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
        $(".content").addClass("hide");
        $(".content").eq($(this).index()).removeClass("hide");
       // $(".show").removeClass("show").addClass("hide");
        //$(".content").eq($(this).index()).removeClass("hide").addClass("show");
    });
    /**$(".tab-title")[0].addEventListener("click", function (e) {
        var ele= e.target;
        var count=0;
        for(var i =0;i<$(".content").length;i++){
            if( ! $(".content")[i].hasClass("hide")){
                $(".content")[i].addClass("hide");
            }
        }

        while(ele.previousSibling){
            if(ele.previousSibling.tagName && ele.previousSibling.tagName.toLowerCase() == "li"){
                count++;
            }
            ele=ele.previousSibling;
        }
        $(".content")[count].removeClass("hide");
    },false);**/
</script>
</body>
</html>